<!--
 * @Author: your name
 * @Date: 2021-02-05 14:52:13
 * @LastEditTime: 2021-03-10 10:23:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \element_vue3.0\src\views\layoutpages\system\Users.vue
-->
<template>
    <div class="ve_container">
        <!-- 搜索 -->
        <el-form ref="queryForm" :inline="true" :model="params">
            <el-form-item label="名称" prop="name">
                <el-input
                    clearable
                    v-model="name"
                    placeholder="名称"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(params, getDataList)"
                    >查询</el-button
                >
                <el-button @click="resetForm(queryForm, params, getDataList)"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <!-- table工具条 -->
        <el-row ref="toolBar" class="ve_header_row_class_name ve_p_10">
            <el-button size="mini" type="primary" @click="handleEdit('添加')"
                >添加</el-button
            >
        </el-row>

        <!-- 列表 -->
        <el-table
            :data="tableData"
            stripe
            border
            highlight-current-row
            @row-click="(row, column, event) => (ve_rowIndex = rowClick(event))"
            :row-class-name="
                ({ rowIndex }) => rowClassName(rowIndex, ve_rowIndex)
            "
            :cell-class-name="
                ({ rowIndex }) => cellClassName(rowIndex, ve_rowIndex)
            "
            header-row-class-name="ve_header_row_class_name"
            header-cell-class-name="ve_header_cell_class_name"
            style="width: 100%"
            :max-height="ve_max_height"
            row-key="id"
            default-expand-all
        >
            <el-table-column prop="name" label="名称"> </el-table-column>
            <el-table-column prop="icon" label="图标">
                <template v-slot="{ row }">
                    <i :class="row.icon">{{ row.icon }}</i>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型">
                <template v-slot="{ row }">
                    <el-tag
                        :type="
                            row.type == 0
                                ? ''
                                : row.type == 1
                                ? 'success'
                                : 'info'
                        "
                        >{{
                            row.type == 0
                                ? "目录"
                                : row.type == 1
                                ? "菜单"
                                : "按钮"
                        }}</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序"> </el-table-column>
            <el-table-column prop="iframe" label="Iframe">
                <template v-slot="{ row }">
                    <el-tag
                        v-if="row.type == 1"
                        :type="row.iframe == 0 ? 'danger' : ''"
                        effect="dark"
                        >{{ row.iframe == 0 ? "否" : "是" }}</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column prop="url" label="URL" show-overflow-tooltip>
                <template v-slot="{ row }">
                    <el-link
                        v-if="isURL(row.url)"
                        type="primary"
                        :href="row.url"
                        target="_blank"
                        >{{ row.url }}</el-link
                    >
                    <span v-else>{{ row.url }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template v-slot:default="{ row }">
                    <el-button
                        @click.prevent="handleEdit('编辑', row)"
                        type="primary"
                        size="mini"
                    >
                        编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            ref="pagination"
            background
            @size-change="val => handleSizeChange(val, params, getDataList)"
            @current-change="
                val => handleCurrentChange(val, params, getDataList)
            "
            :hide-on-single-page="total <= limit ? true : false"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 50, 100]"
            :current-page="page"
            :page-size="limit"
            :total="total"
        >
        </el-pagination>

        <!-- 编辑组件 -->
        <menu-edit
            v-if="showDialog"
            :rowData="rowData"
            :title="dialogTitle"
            :showDialog="showDialog"
            @closeDialog="e => (showDialog = e)"
        />
    </div>
</template>

<script>
import { isURL } from "@/utils/validate";
import MenuEdit from "./components/MenuEdit";
import { reactive, toRefs, ref, onMounted } from "vue";
//?导入公共查询方法
import {
    onSubmit,
    resetForm,
    handleSizeChange,
    handleCurrentChange,
    rowClassName,
    cellClassName,
    rowClick,
    maxHeight
} from "@/views/layoutpages/common";
export default {
    description: "菜单查询与设置",
    components: {
        MenuEdit
    },
    setup() {
        const toolBar = ref(null);
        const pagination = ref(null);
        const queryForm = ref(null);
        const ve_max_height = ref(0);
        const dialogTitle = ref("");
        const showDialog = ref(false);
        const rowData = ref(null);
        const ve_rowIndex = ref(null);
        const tableData = ref([]);
        const params = reactive({
            name: "",
            limit: 10,
            page: 1,
            total: 0
        });
        const { name, limit, page, total } = toRefs(params);

        /**
         * @description:添加or编辑事件
         * @param {*}
         * @return {*}
         */
        const handleEdit = (title, row = null) => {
            showDialog.value = true;
            dialogTitle.value = title;
            rowData.value = row;
        };
        /**
         * @description: 获取列表数据
         * @param {*}
         * @return {*}
         */
        const getDataList = async () => {
            const { code, data } = await VE_API.system.menuList(params);
            if (code == "00") {
                const { limit, page, total, list } = data;
                params.limit = limit;
                params.page = page;
                params.total = total;
                tableData.value = list;
            }
        };

        onMounted(async () => {
            await getDataList();
            maxHeight(pagination, queryForm, toolBar, ve_max_height);
        });
        return {
            getDataList,
            ve_rowIndex,
            tableData,
            params,
            ...{ name, limit, page, total },
            ...{ handleEdit, rowData, dialogTitle, showDialog },
            ve_max_height,
            ...{ pagination, queryForm, toolBar },
            ...{
                onSubmit,
                resetForm,
                handleSizeChange,
                handleCurrentChange,
                rowClassName,
                cellClassName,
                rowClick,
                maxHeight
            },
            isURL
        };
    }
};
</script>

<style lang="scss" scoped></style>
